<template>
	<view class="container">
		
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
	
		<view class="tui-addr-box">
			<form :report-submit="true">
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">会员昵称</view>
						<view class="tui-title">{{myName}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">手机号码</view>
						<view class="tui-title">{{myPhone}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">积分余额</view>
						<view class="tui-title">{{myJifen}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">好友手机号</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="friend_phone" v-model="friend_phone" placeholder="好友绑定的手机号" minlength="11" maxlength="11" type="number" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">使用积分</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="apply_num" v-model="apply_num" placeholder="1个积分转换成1元余额" maxlength="6" type="number" />
					</view>
				</tui-list-cell>

				<view class="tui-addr-save" @click="postJifenTransfer()">
					<tui-button type="warning" height="88rpx">确认积分转移给好友</tui-button>
				</view>
				
				<view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
					<text class="tui-protocol-red">请确认对方绑定的手机号准确无误</text>
					<br><br>
					<text class="tui-protocol-red">转移的积分直接到好友的积分余额</text>
					<br><br>
					<text class="tui-protocol-red">请输入正整数</text>
					<br><br>
				</view>
			</form>
		</view>
		
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	const util = require('../../utils/util.js')
	

	export default {
		components: {
			footerMenu,
			tuiIcon,
			tuiButton,
			tuiListView,
			tuiListCell
		},
		data() {
			return {
				myName: '',
				myPhone: '',
				myMoney: '',
				myJifen: '',
				apply_num: '',
				friend_phone: '',
				remark: '',
				
				//底部导航栏tabbar
				tabCur: 1,
				tabbar: [{icon: "home", text: "首页", size: 21}, 
					{icon: "people", text: "我的", size: 24}],
			}
		},
		methods: {
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.switchTab({ url: '/pages/site/index' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},
			
			getMyBaseInfo: function(){
				uni.request({
				    url: this.$apiUrl+ '/api/user/baseInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
				    success: (res) => {
						let resData = res.data['data'];
						this.myName = resData.name;
						this.myPhone = resData.phone;
						this.myMoney = resData.money;
						this.myJifen = resData.jifen;
					}
				});
			},
			
			//提现申请
			postJifenTransfer: function() {
				if (util.isNullOrEmpty(this.friend_phone)) { this.tui.toast('请填写好友手机号码'); return } 
				if (util.isNullOrEmpty(this.apply_num)) { this.tui.toast('请填写要转换的积分'); return } 
				uni.request({
					url: this.$apiUrl + '/api/jifen/transfer-to-friend',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						friend_phone: this.friend_phone,
						apply_num: this.apply_num,
					},
					success: (res) => {
						let resMsg = res.data['msg'];
						let resErr = res.data['error'];
						this.tui.toast(resMsg);
						if(resErr == 0 ){		//发送成功的时候
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/jifen/bill-list'
								});
							}, 1000)
						}
					}
				});
			},
		},
		
		onLoad: function(options) {
			this.getMyBaseInfo();
		},
		
	}
</script>

<style>
	
	
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/
	
	
	.tui-addr-box {
		padding: 20rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.tui-input {
		width: 500rpx;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}
	.tui-cell-title{
		font-size: 28rpx;
	}
	.tui-addr-label {
		margin-left: 70rpx;
	}

	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}
	.tui-label-active{
		background: #E41F19;
		border-color:#E41F19;
		color: #fff;
	}
	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}
	
	.tui-addr-save {
		padding: 24rpx;
		margin-top: 100rpx;
	}
	
	
	.tui-protocol {
		color: #333;
		font-size: 24upx;
		text-align: center;
		width: 100%;
		margin-top: 29upx;
	}
	
	.tui-protocol-red {
		color: #f54f46;
	}
</style>
